<%-- 
    Document   : homepage
    Created on : Jan 14, 2013, 9:28:07 PM
    Author     : KAKAIT
--%>

<%@page import="model.entity.Product"%>
<%@page import="java.util.List"%>
<%@page import="model.ProductImp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<script type="text/javascript">
    //&lt;![CDATA[
        window.document.title ="SuperMarket";
    //]]&gt;
</script>	
				
   <div class="col-main" id="ves-col-main">
					
													<!-- main top //-->
							<div class="maintop" id="ves-maintop">
								
<script type="text/javascript">
    
    
jQuery.noConflict();
jQuery(document).ready( function(){	
	var buttons = { previous:jQuery('#lofslidecontent1175332365 .lof-previous') ,
					next:jQuery('#lofslidecontent1175332365 .lof-next') };		
	$obj = jQuery('#lofslidecontent1175332365').lofJSidernews( { interval : 5,
											direction		: 'blank',	
										 	easing			: 'easeOutQuad',
											duration		: 2000,
											startItem		: 1,
											auto			: 0,
											maxItemDisplay  : 4,
											navPosition     : 'vertical',
											navigatorHeight : 83,
											navigatorWidth  : 98,
											mainWidth		: 630,
											mainHeight		: 320,													
											buttons			: buttons} );	
											
});
</script>
<div id="lofslidecontent1175332365" class="lof-slider" style="height: 320px; width: 630px;">
  <div class="lof-wrapper ">
		<!--<div class="preload" style="display: none;"><div></div></div>-->
		<div class="lof-main-outer" style="height: 320px; width: 630px;">	
			<div class="lof-startstop" style="display: none;"><div class="lof-stop"></div></div><div class="lof-startstop" style="display: none;"><div class="lof-stop"></div></div><div class="lof-main-wapper" style="left: -1890px; width: 3150px;"> 		  		
							
                                                <div class="lof-item" style="height:320px;width:630px;">
                                                        <img alt="Apple Iphone 5" src="images/630x320-slide1.png"/>                                                          </div> 
							
						<div class="lof-item" style="height:320px;width:630px;">
                                                    <img alt="Microsoft surface" src="images/630x320-slide2.png"/>											
						</div> 
							
						<div class="lof-item" style="height:320px;width:630px;">
                                                    <img alt="Nokia lumia 920" src="images/630x320-slide3.png"/>											
						</div> 
							
						<div class="lof-item" style="height:320px;width:630px;">
                                                    <img alt="Beats Executive Over-Ear" src="images/630x320-slide4.png"/>												
						</div> 
							
						<div class="lof-item" style="height:320px;width:630px;">
                                                    <img alt="Nikon D5100" src="images/630x320-slide5.png">										
						</div> 
									
			</div>    	
		</div>
		<!-- END MAIN CONTENT --> 
		
				<div class="lof-navigator-wapper lof-vertical">
					
				<div class="lof-navigator-outer" style="height: 332px; width: 98px;"> 
					<ul class="lof-navigator" style="height: 415px; top: -83px;">
														
							<li style="height: 83px; width: 98px;">
								<div class="arrow"></div>
								<img alt="Apple Iphone 5" src="images/92x65-slide1.png">									
							</li>
														
							<li style="height: 83px; width: 98px;" class="">
								<div class="arrow"></div>
								<img alt="Microsoft surface" src="images/92x65-slide2.png" style="opacity: 1;">									
							</li>
														
							<li style="height: 83px; width: 98px;" class="">
								<div class="arrow"></div>
								<img alt="Nokia lumia 920" src="images/92x65-slide3.png" style="opacity: 1;">									
							</li>
														
							<li style="height: 83px; width: 98px;" class="active">
								<div class="arrow"></div>
								<img alt="Beats Executive Over-Ear" src="images/92x65-slide4.png" style="opacity: 1;">									
							</li>
														
							<li style="height: 83px; width: 98px;">
								<div class="arrow"></div>
								<img alt="Nikon D5100" src="images/92x65-slide5.png">									
							</li>
							
					</ul>
				</div>
					</div>
		 
	</div>
	  
</div>

							</div>	
							<!-- end main top //-->							
												
						<!-- main content -->
    <div style="width:auto;height:auto" class="ves-productscroll default">
	<div class="productscroll-widget"><!--start tag section-->
            <div class="page-title">
		<h3 class="productscroll-title">Features</h3>
            </div>
            <div class="list-productscroll responsive"><!--start class="list-productscroll"-->
		<div class="caroufredsel_wrapper" style="display: block; text-align: left; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 717px; height: 300px; margin: 0px; overflow: hidden;">
                    
                    <div class="caroufredsel_wrapper" style="display: block; text-align: center; float: none; position: absolute; top: 0px; right: -4302px; bottom: 48px; left: 0px; width: 717px; height: 300px; margin: 0px; overflow: hidden;">
                        
                        <ul class="productscroll-news clearfix" id="ves-productscroll-799867251357569801" style="text-align: center; float: none; position: absolute; top: 0px; left: 0px; margin: 0px; width: 5019px; height: 240px;"><!--start tag ul-->
                            <%
                                ProductImp pi = new ProductImp();
                                List<Product> lpro = pi.listpronew();
                                if(lpro!=null)
                                {
                                    for(int i = 0; i< lpro.size();i++)
                                    {
                            %>
				<li style="width: 240px;"><!--start tag li-->
                                    <div class="article">
					<div class="productscroll-item box-hover clearfix">
                                            <div class="image-thumb">
                                                <a href="<c:url value="/detailproduct">
                                           <c:param name="id" value="<%= String.valueOf(lpro.get(i).getProductid())%>"></c:param></c:url>">
                                                                    <img title="<%= lpro.get(i).getProductname() %>" src="images/product/<%= lpro.get(i).getPicture() %>" class="responsive-img">
						</a>
                                            </div>
                                            <div class="entry-content">
                                                <h4 class="entry-title">
							<a href="<c:url value="/detailproduct">
                                           <c:param name="id" value="<%= String.valueOf(lpro.get(i).getProductid())%>"></c:param></c:url>"><%= lpro.get(i).getProductname() %></a></h4>
                                                 <div class="entry-price"><span class="price">$<%= lpro.get(i).getTotalamount() %></span></div>
						<p class="desc"><%= lpro.get(i).getProductdetail() %></p>
                                                <p class="action"><button onclick="setLocation('<c:url value="/listshoppingcart"><c:param name="id" value="<%= String.valueOf(lpro.get(i).getProductid())%>"></c:param><c:param name="qty" value="1"></c:param></c:url>')" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button></p>
                                            </div>
                                        </div>
                                    </div>				
				</li><!--end tag li-->
                                
                                <%}
                              }    %>  
                            
			</ul>
                    </div>
                </div><!--end tag ul-->
		<div class="productscroll-nav">
                    <a href="#" class="prev" id="vesprev-799867251357569801" style="display: block;">&nbsp;</a>
                    <a href="#" class="next" id="vesnext-799867251357569801" style="display: block;">&nbsp;</a>
		</div>
            </div><!--end class="list-productscroll"-->
        </div><!--end tag section-->
    </div>
    <script type="text/javascript">
	jQuery('#ves-productscroll-799867251357569801').carouFredSel({
		responsive:true,
		prev: '#vesprev-799867251357569801',
		next: '#vesnext-799867251357569801',
		pagination: "#vespager-799867251357569801",
		auto: false,
		width: 'auto',
		height: 300,
		scroll: {
			items : 1,
			duration : 500
		},
		items:{
			width:200,
			visible:{
				min:1,
				max:3			}
		}
	});	
</script>
    <div style="clear:both;"></div>

    <div class="ves-hometab">
	<div id="veshometab" class="hometab-wrapper">
            <div class="hometab-nav">		
		<ul class="tabnav-wrapper">
                    <li class="nav-news"><a class="current" href="#products-news"><span>New Arrival <span></span></span></a></li>                         
                    <li class="nav-bestseller"><a class="" href="#products-bestseller"><span>Best Seller<span></span></span></a></li>					
                </ul>
            </div>
			
			
            <div class="hometab-contents vesclear">
                <div class="tabcontents-wrapper">
                    <div style="width:100%" class=" vesclear" id="products-news">
			<div class="vesclear column4">
                            <ul>
                          <%
                                if(lpro!=null)
                                {
                                    for(int i = 0; i< lpro.size()-1;i++)
                                    {
%>      
				<li>
                                    <div>
                                        <a href="<c:url value="/detailproduct"><c:param name="id" value="<%= String.valueOf(lpro.get(i).getProductid())%>"></c:param></c:url>"><img alt="<%= lpro.get(i).getProductname() %>" src="images/product/<%= lpro.get(i).getPicture() %>"></a>
                                                                                                                                                                    <h4><a title="<%= lpro.get(i).getProductname() %>" href="<c:url value="/detailproduct"><c:param name="id" value="<%= String.valueOf(lpro.get(i).getProductid())%>"></c:param></c:url>"><%= lpro.get(i).getProductname() %></a></h4>         <div class="short-description"><%= lpro.get(i).getProductdetail() %></div>
                                        <div class="review"></div>
					<div class="item-price vesclear">
                                            <div class="price-box">
                                                <p class="old-price">
                                                    <span class="price-label">Regular Price:</span>
                                                    <span id="old-price-9" class="price">
                                                        $  <%= lpro.get(i).getUnitcost() %>             </span>
                                                </p>
                                                <p class="special-price">
                                                    <span class="price-label">Special Price:</span>
                                                    <span id="product-price-9" class="price">
                                                        $<%= lpro.get(i).getTotalamount() %>               </span>
                                                </p>
                                            </div>
					</div>
                                                
                                        <div class="button-actions">			                	
                                            <button onclick="setLocation('<c:url value="/listshoppingcart"><c:param name="id" value="<%= String.valueOf(lpro.get(i).getProductid())%>"></c:param><c:param name="qty" value="1"></c:param></c:url>')" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
                                        </div>
															
                                    </div>
				</li>
			   <% }
                              }    %>  	
                            </ul>
                        </div>
                    </div>
                    <div style="width: 100%; position: relative; top: 0px; left: 0px; display: none;" class="hide vesclear" id="products-bestseller">
			<div class="vesclear column4">
                            <ul>
                          <%
                            List<Product> lprohot = pi.listprobyprotype();
                                if(lprohot!=null)
                                {
                                    for(int i = 0; i< lprohot.size();i++)
                                    {
%>      
				<li>
                                    <div>
                                        <a href="<c:url value="/detailproduct"><c:param name="id" value="<%= String.valueOf(lprohot.get(i).getProductid())%>"></c:param></c:url>"><img alt="<%= lprohot.get(i).getProductname() %>" src="images/product/<%= lprohot.get(i).getPicture() %>"></a>
                                                                                                                                                                    <h4><a title="<%= lprohot.get(i).getProductname() %>" href="<c:url value="/detailproduct"><c:param name="id" value="<%= String.valueOf(lprohot.get(i).getProductid())%>"></c:param></c:url>"><%= lprohot.get(i).getProductname() %></a></h4>         <div class="short-description"><%= lprohot.get(i).getProductdetail() %></div>
                                        <div class="review"></div>
					<div class="item-price vesclear">
                                            <div class="price-box">
                                                <p class="old-price">
                                                    <span class="price-label">Regular Price:</span>
                                                    <span id="old-price-9" class="price">
                                                        $  <%= lprohot.get(i).getUnitcost() %>             </span>
                                                </p>
                                                <p class="special-price">
                                                    <span class="price-label">Special Price:</span>
                                                    <span id="product-price-9" class="price">
                                                        $<%= lprohot.get(i).getTotalamount() %>               </span>
                                                </p>
                                            </div>
					</div>
                                                                                                                                                                    <div class="button-actions">			                	
                                            <button onclick="setLocation('<c:url value="/listshoppingcart"><c:param name="id" value="<%= String.valueOf(lprohot.get(i).getProductid())%>"></c:param><c:param name="qty" value="1"></c:param></c:url>')" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
                                      </div>
															
                                    </div>
				</li>
			   <% }
                              }    %>  	
                            </ul>
			</div>
                    </div>
        	 </div> 
            </div>
        
		 
		 
	<script type="text/javascript">
        jQuery(function( $ ) { $("#veshometab").organicTabs();    });
    </script>
			
	</div>
</div>						<!-- end main content -->		
						
</div>
